<template>
  <div>
    <el-table :data="pagedData" border style="width: 100%" height="600">
      <el-table-column prop="customerInfo" label="客户信息" min-width="120" />
      <el-table-column prop="phone" label="手机号" min-width="120" />
      <el-table-column prop="logistics" label="物流信息" min-width="120" />
      <el-table-column prop="remark1" label="备注1" min-width="120" />
      <el-table-column prop="remark2" label="备注2" min-width="120" />
      <el-table-column prop="remark3" label="备注3" min-width="120" />
      <el-table-column prop="isAddedWeChat" label="是否添加微信" min-width="120" />
      <el-table-column prop="category" label="类别" min-width="120" />
    </el-table>
    <div style="display: flex; justify-content: center; margin-top: 25px">
      <el-pagination
        background
        layout="prev, pager, next, jumper,total"
        :page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        @update:current-page="$emit('update:currentPage', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  data: any[];
  total: number;
  pageSize: number;
  currentPage: number;
}>();

const pagedData = computed(() => {
  const start = (props.currentPage - 1) * props.pageSize;
  return props.data.slice(start, start + props.pageSize);
});
</script>
